function pageRenderDomainjs(menu){
    return `
    <div class="box" id="app-main-${menu.index}">
        <div class="table-options-box">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="tree-wrap">
                        <el-scrollbar height="100%">
                            <el-tree :data="treeList" :props="defaultProps" :render-content="renderContent" @node-click="handleNodeClick">
                                <template #default="{node,data}">
                                    <el-tooltip class="box-item" effect="dark" :content="node.label" placement="top">
                                        <span>{{node.label}}</span>
                                    </el-tooltip>
                                </template>
                            </el-tree>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="middle-table-wrap">
                        <el-form class="zh-form" ref="refSearchForm" :model="formModelValue"
                            :label-width="formconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                            style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                            <el-form-item v-for="(item, index) in formconfig.fieldList" :key="'form-item' + index"
                                :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                                <!-- 动态渲染表单项，这里以文本输入框为例 -->
                                <el-input v-if="item.type === 'input'" v-model="formModelValue[item.prop]" clearable
                                    placeholder="请输入"></el-input>
                                <!-- 根据不同类型的item渲染不同的表单项 -->
                                <el-select v-if="item.type === 'select'" v-model="formModelValue[item.prop]" filterable
                                    remote :remote-method="remoteMethod" :loading="selectLoading" clearable
                                    placeholder="请选择">
                                    <el-option v-for="(x, index) in clientList" :key="x.value" :label="x.label"
                                        :value="x.value"></el-option>
                                </el-select>
                                <el-date-picker v-if="item.type === 'date'" v-model="formModelValue[item.prop]" type="date"
                                    value-format="YYYY-MM-DD" placeholder="请选择日期" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getTableData(clickNode)">查询</el-button>
                                <el-dropdown class="btn-wrap">
                                    <el-button type="primary" plain>
                                      更多<el-icon class="el-icon--right"><ArrowDown></ArrowDown></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                      <el-dropdown-menu>
                                        <el-dropdown-item>导入数据</el-dropdown-item>
                                        <el-dropdown-item>列显示/隐藏</el-dropdown-item>
                                        <el-dropdown-item>复制数据</el-dropdown-item>
                                        <el-dropdown-item>导出表格</el-dropdown-item>
                                        <el-dropdown-item>打印数据</el-dropdown-item>
                                        <el-dropdown-item>全选当前页</el-dropdown-item>
                                        <el-dropdown-item>全选所有页</el-dropdown-item>
                                        <el-dropdown-item>取消全选</el-dropdown-item>
                                        <el-dropdown-item>只看选中</el-dropdown-item>
                                      </el-dropdown-menu>
                                    </template>
                                  </el-dropdown>
                            </el-form-item>
                        </el-form>
                        <el-table ref="refMiddleTable" class="zh-el-table" :data="tableData" size="default" row-key="id"
                            :height="tableConfig.height || '100%'" :highlight-current-row="tableConfig.highlightCurrentRow" 
                            @row-click="clickRow">
                            <el-table-column v-if="tableConfig.hasSelection" type="selection" width="50" align="center"
                                reserve-selection>
                            </el-table-column>
                            <el-table-column v-if="tableConfig.hasIndex" type="index" width="60" label="序号" align="center">
                            </el-table-column>
                            <el-table-column v-for="(item, index) in tableConfig.columns" :key="index"
                                :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                                :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop"
                                :fixed="item.fixed" :sortable="item.sortable" :class-name="item.className">
                            </el-table-column>
                            <el-table-column v-if="tableConfig.actionColumn" :fixed="right"
                                :width="tableConfig.actionColumn?.width" :min-width="tableConfig.actionColumn?.minWidth"
                                :label="tableConfig.actionColumn?.label"
                                :align="tableConfig.actionColumn?.align ? tableConfig.actionColumn.align : 'center'">
                                <template #default="scope">
                                    <el-button v-if="tableConfig.actionColumn?.hasRowEditAction" link type="primary"
                                        size="small" :icon="Edit"
                                        @click="() => openAddEditModal('edit', scope.row)">编辑</el-button>
                                    <el-button v-if="tableConfig.actionColumn?.hasRowDeleteAction" link type="danger"
                                        size="small" :icon="Delete" @click.stop="rowDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" background
                                layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="0">
                    <div class="right-table-wrap">
                        <el-form class="zh-form" ref="refDetailSearchForm" :model="detailFormModelValue"
                            :label-width="detailFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                            style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                            <el-form-item v-for="(item, index) in detailFormconfig.fieldList" :key="'form-item' + index"
                                :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                                <!-- 动态渲染表单项，这里以文本输入框为例 -->
                                <el-input v-if="item.type === 'input'" v-model="detailFormModelValue[item.prop]" clearable
                                    placeholder="请输入"></el-input>
                                <!-- 根据不同类型的item渲染不同的表单项 -->
                                <el-select v-if="item.type === 'select'" v-model="detailFormModelValue[item.prop]" filterable
                                    remote :remote-method="remoteMethod" :loading="selectLoading" clearable
                                    placeholder="请选择">
                                    <el-option v-for="(x, index) in clientList" :key="x.value" :label="x.label"
                                        :value="x.value"></el-option>
                                </el-select>
                                <el-date-picker v-if="item.type === 'date'" v-model="detailFormModelValue[item.prop]" type="date"
                                    value-format="YYYY-MM-DD" placeholder="请选择日期" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getTableData(clickNode)">查询</el-button>
                                <el-button type="success" @click="() => openAddEditModal('add')">新增</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table ref="refRightTable" class="zh-el-table" :data="detailTableData" size="default"
                            row-key="id" :height="detailTableConfig.height || '100%'"
                            :highlight-current-row="detailTableConfig.highlightCurrentRow">
                            <el-table-column v-if="detailTableConfig.hasSelection" type="selection" width="50"
                                align="center" reserve-selection>
                            </el-table-column>
                            <el-table-column v-if="detailTableConfig.hasIndex" type="index" width="60" label="序号"
                                align="center">
                            </el-table-column>
                            <el-table-column v-for="(item, index) in detailTableConfig.columns" :key="index"
                                :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                                :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop"
                                :fixed="item.fixed" :sortable="item.sortable" :class-name="item.className">
                            </el-table-column>
                            <el-table-column v-if="detailTableConfig.actionColumn" :fixed="right"
                                :width="detailTableConfig.actionColumn?.width"
                                :min-width="detailTableConfig.actionColumn?.minWidth"
                                :label="detailTableConfig.actionColumn?.label"
                                :align="detailTableConfig.actionColumn?.align ? detailTableConfig.actionColumn.align : 'center'">
                                <template #default="scope">
                                    <el-button v-if="detailTableConfig.actionColumn?.hasRowEditAction" link type="primary"
                                        size="small" :icon="Edit"
                                        @click="() => openAddEditModal('edit', scope.row)">编辑</el-button>
                                    <el-button v-if="detailTableConfig.actionColumn?.hasRowDeleteAction" link type="danger"
                                        size="small" :icon="Delete" @click.stop="rowDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination v-model:currentPage="detailCurrentPage" v-model:page-size="detailPageSize" background
                                layout="prev, pager, next, jumper" :total="1000" @size-change="handleDetailSizeChange"
                                @current-change="handleDetailCurrentChange" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-dialog v-model="addEditModal.show" v-if="addEditModal.show" :title="addEditModal.title"
                :closeOnClickModal="false" :top="addEditModal.top" :append-to-body="true" :close="addEditModal.cancel">
                <el-form class="zh-form" ref="refaddEditForm" :model="addEditFormModelValue"
                    :label-width="addEditFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                    style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                    <el-form-item v-for="(item, index) in addEditFormconfig.fieldList" :key="'form-item' + index"
                        :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                        <!-- 动态渲染表单项，这里以文本输入框为例 -->
                        <el-input v-if="item.type === 'input'" v-model="addEditFormModelValue[item.prop]"
                            :disabled="item.disabled" placeholder="请输入"></el-input>
                        <!-- 根据不同类型的item渲染不同的表单项 -->
                        <el-select v-if="item.type === 'select'" v-model="formModelValue[item.prop]" filterable
                            remote :remote-method="item.remoteMethod" :loading="addLoading" clearable
                            placeholder="请选择">
                            <el-option v-for="(x, index) in item.options" :key="x.value" :label="x.label"
                                :value="x.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addEditModal.cancel">取消</el-button>
                        <el-button type="primary" :loading="addEditModal.loadingSubmit"
                            @click="addEditModal.submit">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
    
    <script type="module">
        (function () {
            const { createApp, ref, onMounted } = Vue;
            const { ElMessage, ElMessageBox } = window.ElementPlus;
            const vue3Composition1 = {
                setup() {
                    // 左侧树
                    const treeList = ref([]);
                    const defaultProps = {
                        label: "label",
                        children: "children"
                    };
                    const clickNode = ref({});
                    const handleNodeClick = (node) => {
                        console.log("nodeclick:", node);
                        clickNode.value = node;
                        getTableData(node);
                    };
                    // 中间搜索表单
                    const formconfig = ref({
                        fieldList: [],
                    });
                    const formModelValue = ref({});
                    // 中间表格
                    const tableConfig = ref({
                        hasSelection: false,
                        hasIndex: false,
                        highlightCurrentRow: true,
                        columns: [
                            { label: "角色", prop: "test" },
                            { label: "角色1", prop: "id" },
                            { label: "角色2", prop: "role2" },
                        ],
                    });
                    // 获取中间表格内容
                    const tableData = ref([]);
                    const getTableData = async (node) => {
                        if(node){
                            const res = await fetchData(
                            "https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                            {
                                data: { ...formModelValue.value, icp_customer_code: node.id },
                                token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                                datatab: "35dbo9Do3bIT2mlhfULa2xm0ffZSTKbtm72pEjZBbSH41ZIoREqkCR80BA",
                                sqlviw: 0
                            },
                            {});
                            tableData.value = res;
                        }else{
                            ElMessage.error("请先选择公司！");
                        }
                        
                    };
                    // 点击中间表格行
                    const clickRow = (row)=>{
                        console.log("middle row:", row);
                        addEditModal.value.row = row;
                    };
                    // 中间分页
                    const currentPage = ref(1);
                    const pageSize = ref(100);
                    const handleSizeChange = (val) => {
                        console.log("size change:", val);
                    };
                    const handleCurrentChange = (val) => {
                        console.log("current page:", val);
                    };
                    // 右侧搜索表单
                    const detailFormconfig = ref({
                        fieldList: [],
                    });
                    const detailFormModelValue = ref({});
                    // 右侧表格
                    const detailTableConfig = ref({
                        hasSelection: false,
                        hasIndex: false,
                        columns: [
                            { label: "角色", prop: "test" },
                            { label: "角色1", prop: "id" },
                            { label: "角色2", prop: "role2" },
                        ],
                    });
                    // 获取右侧表格内容
                    const detailTableData = ref([]);
                    const getDetailTableData = async () => {
                        const res = await fetchData("https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                        {
                            data: { xgid: addEditModal.value.row.id, type: "个人"  },
                            LIKE: "nl",
                            token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                            datatab: "04db3XwTZoedzifkUhSP9zslIojpuSsKeMeLmWWInQemszF48HpptehC+xbIKixRCTY/hvnEeQW4f5E6vZc/2ZMKsUo",
                        },
                        {});
                        detailTableData.value = res;
                    };
                    // 右侧分页
                    const detailCurrentPage = ref(1);
                    const detailPageSize = ref(100);
                    const handleDetailSizeChange = (val) => {
                        console.log("size change:", val);
                    };
                    const handleDetailCurrentChange = (val) => {
                        console.log("current page:", val);
                    };
                    // 右侧弹窗
                    const refaddEditForm = ref();
                    const addEditFormModelValue = ref({});
                    const addEditFormconfig = ref({
                        fieldList: [],
                    });
                    // 提交右侧弹窗
                    const submitForm = async ()=>{
                        const res = await fetchData("https://cloud.lugangwool.com/server/setkehuzlapi.php?dbcl=", {
                            data: { ...addEditFormModelValue.value },
                            token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                            datatab: "04db3XwTZoedzifkUhSP9zslIojpuSsKeMeLmWWInQemszF48HpptehC+xbIKixRCTY/hvnEeQW4f5E6vZc/2ZMKsUo"
                        }, {});
                        console.log("submitressss:", res);
                        if (res.IsOk === "success") {
                            refaddEditForm.value.resetFields();
                            addEditModal.value.show = false;
                            getDetailTableData();
                            ElMessage.success("保存成功！");
                        } else {
                            ElMessage.error("保存失败！");
                        }
                    };
                    // 关闭右侧弹窗
                    const cancelFormSubmit = () => {
                        refaddEditForm.value.resetFields();
                        addEditModal.value.show = false;
                    }
                    const addEditModal = ref({
                        show: false,
                        row: {},
                        submit: submitForm,
                        cancel: cancelFormSubmit
                    });
                    const roleNameList = ref([]);
                    const addLoading = ref(false)
                    const remoteMethod = (query) => {
                        if (query) {
                            addLoading.value = true;
                            setTimeout(() => {
                            addLoading.value = false;
                            clientList.value = clientList.value.filter((item) => {
                                return item.label.toLowerCase().includes(query.toLowerCase())
                            })
                            }, 200)
                        } else {
                            clientList.value = []
                        }
                    }
                    // 设置右侧弹窗表单
                    const addObj = ref({});
                    const addFieldList = ref([]);
                    const editFieldList = ref([]);
                    const isEdit = ref("add");
                    // 打开右侧弹窗
                    const openAddEditModal = (type, row) => {
                        if (type == "add") {
                            addEditModal.value.show = true;
                            addEditModal.value.title = "新增";
                            isEdit.value = "add";
                            addEditFormModelValue.value = addEditModal.value.row;
                            addEditFormconfig.value.fieldList = addFieldList.value;
                        } else if (type == "edit") {
                            addEditModal.value.title = "编辑";
                            addEditModal.value.show = true;
                            isEdit.value = "edit";
                            addEditFormconfig.value.fieldList = editFieldList.value;
                            addEditModal.value.row = row;
                            addEditFormModelValue.value = { ...row };
                        }
                    };
                    // 左侧树图标渲染
                    const renderContent = (h, { node, data }) => {
                        let icon = null;
                        if (node.level == "1") {
                            icon = h("i", { class: "iconfont icon-folder", style: "margin-right: 5px;" });
                        } else if (data.children && data.children.length > 0) {
                            icon = h("i", { class: "iconfont icon-folder", style: "margin-right: 5px;" });
                        } else if (node.level !== "1" && (!data.children || (data.children && data.children.length < 1))) {
                            icon = h("i", { class: "iconfont icon-paper", style: "margin-right: 5px;" });
                        }
                        return h("span", { style: "flex: 1; display: flex; align-items: center; justify-content: start;" }, [icon, h("span", data.label)]);
                    };
                    onMounted(async () => {
                        // 获取树
                        const res = await fetchData("https://cloud.lugangwool.com/server/getkehulbapi.php?dbcl=",
                            {
                                token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                                sqlviw1: true,
                                datatab: "688dQ00RNqzjMVLI1jwe7QmX0WxgeGYJSLC/wOOUOanOG6El+tUzO+OzfSGf6VDNFGuzxFQE0ud6AYY",
                                select: "a5efm98LHq6QTaPYas7hT9mZ0W9eLb2ba6sEFS9Q6LYxohibpeb5qEkNEdJSnCGvv2FA2NfIa/eCSG6+N6A2AzQ+D9iJ5IcbDZA57xmP7skV1FnfZEPBpoLKYa5U6cI8ucb8/hcnopEYLRSpK8BwhzALr9znpZ31rYByURVhEK4zrGFbBXr+EeXl",
                                LIKE: "nl"
                            },
                            {});
                        treeList.value = replaceFieldInTree(res,"name","label");
                        console.log("treeList.value", treeList.value);
    
                        // 获取中间表头
                        const tableHeadRes = await fetchData(
                            "https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=",
                            { xgid: "517", dataviw: "DataTable" },
                            {});
                        tableConfig.value.columns = tableHeadRes.map((x) => {
                            return {
                                label: x.title,
                                prop: x.field,
                                width: x.width,
                            };
                        });
    
                        // 设置中间搜索配置项
                        const obj = {};
                        tableHeadRes.filter((x, index) => {
                            if (index === 0) {
                                obj[x.field] = "";
                            }
                        })
                        formconfig.value.fieldList = tableHeadRes.filter((x, index) => index === 0).map((item) => {
                            return {
                                label: item.title + ":",
                                prop: item.field,
                                type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input"
                            }
                        });
                        formModelValue.value = obj;
    
                        // 获取右侧表头
                        const detailTableHeadRes = await fetchData(
                            "https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=",
                            { xgid: "608", dataviw: "DataTable" },
                            {});
                        detailTableConfig.value.columns = detailTableHeadRes.map((x) => {
                            return {
                                label: x.title,
                                prop: x.field,
                                width: x.width,
                            };
                        });
    
                        // 设置右侧搜索配置项
                        const detailObj = {};
                        detailTableHeadRes.filter((x, index) => {
                            if (index === 0) {
                                detailObj[x.field] = "";
                            }
                        })
                        detailFormconfig.value.fieldList = detailTableHeadRes.filter((x, index) => index === 0).map((item) => {
                            return {
                                label: item.title + ":",
                                prop: item.field,
                                type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input"
                            }
                        });
                        detailFormModelValue.value = detailObj;
    
                        // 设置右侧弹窗新增、修改的配置
                        detailTableHeadRes.filter((x) => {
                            if (x.sfbaocun === "1") {
                                addObj.value[x.field] = "";
                            }
                        })
                        addFieldList.value = detailTableHeadRes.filter((x) => x.sfbaocun === "1").map((item) => {
                            return {
                                label: item.title + ":",
                                prop: item.field,
                                type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                                disabled: item.readonly === "1" ? true : false
                            }
                        });
                        editFieldList.value = detailTableHeadRes.filter((x) => x.sfbaocun === "1").map((item) => {
                            return {
                                label: item.title + ":",
                                prop: item.field,
                                type: item.Label_Style === "select" ? "select" : item.leixing === "date" ? "date" : "input",
                                disabled: item.readonly === "1" ? true : false
                            }
                        });
                        // 获取弹窗中下拉列表
                        const roleNameRes = await fetchData("https://cloud.lugangwool.com/server/getdatalisapi.php?dbcl=", {
                            token: "163AC33D-F1D8-BB59-6800-D1A208403D99",
                            workid: "91410205-ce72-cf18-dfb5-b5a3c6b99ac2",
                            data: {
                                CD00000664: 1
                            }
                        }, {});
                        roleNameList.value = roleNameRes.results;
                        roleNameList.value = replaceFieldInTree(roleNameList.value, "text", "label");
                        roleNameList.value = replaceFieldInTree(roleNameList.value, "id", "value");
                        // 暂时写死
                        addEditFormconfig.value.fieldList = addEditFormconfig.value.fieldList.map((item)=>{
                            if(item.prop === "Orgrole_name"){
                                return {...item, options: roleNameList.value, remoteMethod: ()=>{console.log("111")}}
                            }
                            return item;
                        });
                    });
    
                    return {
                        treeList,
                        renderContent,
                        defaultProps,
                        handleNodeClick,
                        clickNode,
                        formconfig,
                        formModelValue,
                        tableConfig,
                        tableData,
                        getTableData,
                        detailFormconfig,
                        detailFormModelValue,
                        clickRow,
                        currentPage,
                        pageSize,
                        handleSizeChange,
                        handleCurrentChange,
                        detailTableConfig,
                        detailTableData,
                        detailCurrentPage,
                        detailPageSize,
                        handleDetailSizeChange,
                        handleDetailCurrentChange,
                        refaddEditForm,
                        addEditFormModelValue,
                        addEditFormconfig,
                        addEditModal,
                        openAddEditModal,
                        addLoading
                    };
                },
            };
            const app1 = createApp(vue3Composition1);
            app1.use(ElementPlus).mount("#app-main-${menu.index}");
            return app1;
        })();
    </script>
    
    <style>
        .box {
            height: 100%;
        }
    
        .table-options-box {
            display: flex;
            height: 100%;
            width: 100%;
            overflow: hidden;
            flex-direction: column;
        }
    
        .table-options-box .el-row,
        .table-options-box .el-row .tree-wrap {
            height: 100%;
        }
    
        .table-options-box .el-col {
            height: 100%;
            overflow: hidden;
        }
    
        .table-options-box .middle-table-wrap,
        .table-options-box .right-table-wrap {
            display: flex;
            height: 100%;
            width: 100%;
            overflow: hidden;
            flex-direction: column;
        }
    
        .table-options-box .zh-form {
            flex: 1;
        }
    
        .table-options-box .pagination {
            padding: 10px 0 0 0;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        .table-options-box .btn-wrap {
            margin-left: 12px;
        }
    </style>
    `; }